<template>
    <div class="register">
        <Steps :current="0">
            <Step title="注册" icon="ios-person"></Step>
            <Step title="上传头像" icon="ios-camera"></Step>
            <Step title="验证邮箱" icon="ios-mail"></Step>
        </Steps>
        <Card class="regcard">
            <p><!--账号-->
                <Tooltip content="输入昵称" theme="light" placement="bottom-start">
                    <Input v-model="value" placeholder="Enter something..." style="width: 300px" />
                </Tooltip>
            </p>
            <p><!--密码-->
                <Tooltip content="建议使用字母、数字和符号两种及以上的组合，6-16个字符" theme="light" placement="bottom-start">
                    <Input v-model="password" type="password" password placeholder="设置密码" style="width: 200px" />
                </Tooltip>
            </p>
            <p><!--确认密码-->
                <Tooltip content="请再次输入密码" theme="light" placement="bottom-start">
                    <Input v-model="password" type="password" password placeholder="设置密码" style="width: 200px" />
                </Tooltip>
            </p>
            <p><!--手机号-->
                <Tooltip content="请输入合法手机号" theme="light" placement="bottom-start">
                    <Input v-model="value" placeholder="Enter something..." style="width: 300px" />
                </Tooltip>
            </p>
            <p><!--验证码-->
                <Input v-model="value" placeholder="Enter something..." style="width: 300px" />
                <Button>发送验证码</Button>
            </p>
        </Card>
    </div>
</template>

<script scoped>
    export default {
        name: "Register",
        data() {
            return {}
        },
        methods: {}
    }
</script>

<style scoped>
    *{margin:0px;padding: 0px;}
    .register{
        width: 60%;
        margin: 0 auto;
    }
    .regcard{
        boder:1px;
    }
    .regcard p{
        margin-bottom: 40px;
    }
</style>
